.error-area {
  background: #E8E8E8;
  height: 100%;
  font-size: 14px;
  text-align: center;
  z-index: 0;
  position: relative;
  display: grid;
  align-items: center;
  background-size: cover;
  width: 100%;
  @include background('design/1-24×2');

  &:before {
    content: "";
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: rgba(66, 21, 2, 0.45);

  }

  .error-area-wrapper {
    height: 100%;
    width: 100%;

    .error-area-top {
      flex: 0 0 auto;
      height: calc(100% - 30px);
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      position: relative;

      .error-area-top-inside {
        position: absolute;
        top: calc(50%);
        left: 40px;

        h3 {
          line-height: 200px;
          color: #fff;
          font-weight: bold;
          margin-bottom: 20px;
          width: 100%;
          font: 180px 'LeagueGothicRegular';
          position: relative;
          top: -30px;
          font-size: 223px;
          line-height: 200px;
          left: 100px;
          font-weight: bold;
          color: rgba(0, 0, 0, 0);
          transform: skew(63deg, -26.6deg);
          text-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
          z-index: 50;
        }

        h3:after {
          content: "404";
          position: absolute;
          top: 15px;
          left: 25px;
          color: rgba(255, 255, 255, 1);
          transform: skew(-63deg) scale(1, .5);
          text-shadow: -1px -1px 1px #aaa,
          -2px -2px 1px #999,
          -3px -3px 1px #888,
          -4px -4px 1px #777,
          -5px -5px 1px #666,
          -6px -6px 1px #555,
          -7px -7px 5px rgba(0, 0, 0, 0.35);
          z-index: 100;
        }
        p {
          font-size: 20px;
          line-height: 30px;
          width: 100%;
          letter-spacing: 1px;
          position: absolute;
          top: 180px;
          left: 430px;
          font: 24px/24px 'ArchitectsDaughterRegular';
          color: rgba(255, 255, 255, .75);
          text-align: center;
          transform: skew(63deg, -26.6deg);
          z-index: 50;
        }
      }

    }

    .back-home{
      margin-top: 40px;
      display: flex;
      justify-content: end;
      position: relative;
      z-index: 99999;
      .el-button{
        font-size: 28px;
        line-height: 56px;
        overflow: hidden;
        padding: 0 20px;
        border-radius: 50px;
      }

    }

    .copyright-footer {
      height: 30px;

      p {
        font-size: 16px;
        line-height: 29px;
        color: #f9f9f9;
        font-weight: bold;
      }
    }
  }
}
